/**
 * Created by sunguodong on 2021/12/31.
 * Email: sungd@tongtech.com
 * Description: ArGIS 地图中的应用方法
*/

import './index.less';
import React, {useEffect} from "react";
import { Button } from "antd";
import * as esriLoader from 'esri-loader';
import icon from "../../image/gis_5g_station_normal.svg";
const options = {   
    url: 'https://js.arcgis.com/3.39/',
}
esriLoader.loadScript(options);


export const MapAddRemoveOverlays: React.FC = () => {
    var data = [  //json数据 
        {
            "name":"故宫",
            "x":116.413114,
            "y":39.924091,  
            "desc":"北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，位于北京中轴线的中心，是中国古代宫廷建筑之精华。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。是世界上现存规模最大、保存最为完整的木质结构古建筑之一。",
            "type":"cultureHeritage" 
        },
        {
            "name":"故宫",
            "x":116.423214,
            "y":39.924091,  
            "desc":"北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，位于北京中轴线的中心，是中国古代宫廷建筑之精华。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。是世界上现存规模最大、保存最为完整的木质结构古建筑之一。",
            "type":"cultureHeritage" 
        },
        {
            "name":"故宫",
            "x":116.423714,
            "y":39.914091,  
            "desc":"北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，位于北京中轴线的中心，是中国古代宫廷建筑之精华。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。是世界上现存规模最大、保存最为完整的木质结构古建筑之一。",
            "type":"cultureHeritage" 
        },
        {
            "name":"故宫",
            "x":116.403814,
            "y":39.924091,  
            "desc":"北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，位于北京中轴线的中心，是中国古代宫廷建筑之精华。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。是世界上现存规模最大、保存最为完整的木质结构古建筑之一。",
            "type":"cultureHeritage" 
        },
        {
            "name":"故宫",
            "x":116.403914,
            "y":39.934191,  
            "desc":"北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，位于北京中轴线的中心，是中国古代宫廷建筑之精华。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。是世界上现存规模最大、保存最为完整的木质结构古建筑之一。",
            "type":"cultureHeritage" 
        },
        {
            "name":"故宫",
            "x":116.403214,
            "y":39.943291,  
            "desc":"北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，位于北京中轴线的中心，是中国古代宫廷建筑之精华。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。是世界上现存规模最大、保存最为完整的木质结构古建筑之一。",
            "type":"cultureHeritage" 
        },
        {
            "name":"故宫",
            "x":116.403314,
            "y":39.929391,  
            "desc":"北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，位于北京中轴线的中心，是中国古代宫廷建筑之精华。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。是世界上现存规模最大、保存最为完整的木质结构古建筑之一。",
            "type":"cultureHeritage" 
        },
        {
            "name":"故宫",
            "x":116.403414,
            "y":39.928491,  
            "desc":"北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，位于北京中轴线的中心，是中国古代宫廷建筑之精华。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。是世界上现存规模最大、保存最为完整的木质结构古建筑之一。",
            "type":"cultureHeritage" 
        },
    ];
    var map: any;
    function componentDid() {

        esriLoader.loadModules([
            "esri/map",
            "dojo/dom",
            "dojo/on",
            "esri/geometry/Point",
            "esri/symbols/PictureMarkerSymbol",
            "esri/graphic",
            "esri/InfoTemplate",
        ]).then(([Map, dom, on, Point, PictureMarkerSymbol, Graphic, InfoTemplate]) => {
            map = new Map('mapCon', {
                basemap: 'osm',
                center: [116.403414, 39.924091],
                zoom: 15
            });
            on(dom.byId('addOne'), 'click', addOne);
            on(dom.byId('addmore'), "click", addmore);
            on(dom.byId("deleteOne"), "click", deleteOne);

            function addOne () {
                map.graphics.clear();
                var newPoint = new Point(116.403414, 39.924091);
                var picSymbol = new PictureMarkerSymbol(icon, 50, 50);
                var picGraphic = new Graphic(newPoint, picSymbol);
                map.graphics.add(picGraphic);
            }

            function addmore () {
                for(var i=0;i<data.length;i++){
                    var pt = new Point(data[i].x,data[i].y);  
                    var pms = new PictureMarkerSymbol(icon, 50, 50); 
                    var gImg = new Graphic(pt, pms);
                    var infoTemplate = new InfoTemplate();
                    infoTemplate.setTitle(data[i].name);
                    infoTemplate.setContent(data[i].desc);
                    gImg.setInfoTemplate(infoTemplate);
                    map.graphics.add(gImg);
                }
            }
            
            function deleteOne () {
                map.graphics.clear();
            }
        }).catch(err => {
            console.error(err)
        })
    }
    
    useEffect(() => {
        return componentDid();
    }, []);

    function componentWillUn() {}

    useEffect(() => () => {
        return componentWillUn();
    }, []);


    return (
        <div id="mapCon">
            <div className={'div-option'} style={{position: 'absolute', right: '3%', top: '3%', display: 'grid', zIndex: 9999}}>
                <Button type={'primary'} id="addOne">添加单个覆盖物</Button>
                <Button type={'primary'} id="addmore">添加多个覆盖物</Button>
                <Button type={'primary'} id="deleteOne">清除覆盖物</Button>
            </div>
        </div>
    )
}
